<script setup>
import { ref } from 'vue'
import { ElDialog } from 'element-plus'
import { useSettingsStore } from '../stores/modules/settings'
import {
  SettingsMenu,
  AppearanceSettings,
  ApiSettings,
  AccountSettings
} from '../components/settings'

const settingsStore = useSettingsStore()
</script>

<template>
  <el-dialog
    v-model="settingsStore.dialogVisible"
    title="设置"
    width="700px"
    :show-close="true"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :lock-scroll="false"
    class="settings-dialog"
    draggable
    @closed="settingsStore.activeMenu = 'appearance'"
  >
    <div class="settings-content">
      <!-- 左侧菜单 -->
      <SettingsMenu
        :active-menu="settingsStore.activeMenu"
        @update:active-menu="settingsStore.activeMenu = $event"
      />

      <!-- 右侧设置内容 -->
      <div class="settings-main">
        <!-- 外观设置 -->
        <AppearanceSettings v-if="settingsStore.activeMenu === 'appearance'" />

        <!-- API配置设置 -->
        <ApiSettings v-if="settingsStore.activeMenu === 'config'" />

        <!-- 账户管理设置 -->
        <AccountSettings v-if="settingsStore.activeMenu === 'edit'" />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="settingsStore.closeSettingDialog"
          class="cancel-button"
          v-if="settingsStore.activeMenu !== 'edit'"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="settingsStore.saveSettings"
          v-if="settingsStore.activeMenu !== 'edit'"
          class="save-button"
          >保存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.settings-trigger {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-trigger:hover {
  background-color: var(--el-fill-color-light);
}

:deep(.settings-dialog) {
  border-radius: 8px;
  background-color: var(--el-bg-color-overlay);
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background-color: var(--el-bg-color-overlay);
}

:deep(.el-dialog__body) {
  padding: 0;
  background-color: var(--el-bg-color-overlay);
}

:deep(.el-dialog__footer) {
  background-color: var(--el-bg-color-overlay);
  border-top: 1px solid var(--el-border-color-lighter);
}

.settings-content {
  display: flex;
  min-height: 500px;
  background-color: var(--el-bg-color-overlay);
}

.settings-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: var(--el-bg-color);
}

.dialog-footer {
  padding: 20px;
  text-align: right;
}

.cancel-button,
.save-button {
  background: transparent;
  border: none;
  color: var(--el-button-save-text-color);
}

.cancel-button {
  color: var(--el-button-cancel-text-color);
}

.cancel-button:hover {
  background: var(--el-button-cancel-hover-color);
  color: var(--el-button-cancel-hover-text-color) !important;
}

.save-button:hover {
  background: var(--el-button-save-hover-color);
  color: var(--el-button-save-hover-text-color);
}
</style>
